<script setup>
import { useInfoStore } from '@/stores/index.js'
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const InfoStore = useInfoStore()

// 存储信息对象
const infoData = ref({})

// 存储接收到的类型type
const type = ref(null)

// Tabs标签列表
const tabList = ref([])

// 当前激活的标签项索引
const activeIndex = ref(0)

// 滚动列表的ID-用于定位
const scrollId = ref(null)

// 基于type生成模版文本内容
const getTitle = computed(() => {
	switch (type.value) {
		case 'scenery':
			return '景点'
		case 'hotel':
			return '酒店'
		case 'restaurant':
			return '餐厅'
		default:
			return ''
	}
})

// 初始化Tabs标签列表
const initTabList = () => {
	switch (type.value) {
		case 'scenery':
			tabList.value = [{ name: '景点介绍' }, { name: '优待政策' }, { name: '交通信息' }, { name: '温馨提示' }]
			break
		case 'hotel':
			tabList.value = [{ name: '酒店介绍' }, { name: '酒店设施' }, { name: '入住政策' }]
			break
		case 'restaurant':
			tabList.value = [{ name: '餐厅介绍' }, { name: '特色美食' }]
			break
	}
}

// Tab标签列表点击时跳转到相应位置
const onClickTabs = (index) => {
	// 记录当前的索引项
	activeIndex.value = index

	// 跳转到相应的列表项位置
	scrollId.value = `${type.value}${index + 1}`
}

// 页面初始化加载数据
onLoad((option) => {
	infoData.value = InfoStore.InfoData

	if (option.type) {
		type.value = option.type
	}

	initTabList()
})
</script>

<template>
	<view class="container">
		<scroll-view style="height: 100vh" scroll-y="true" :scroll-into-view="scrollId" scroll-with-animation>
			<view>
				<!-- 头部信息 -->
				<view class="header">
					<view class="name">
						{{ infoData.name }}
					</view>

					<view class="info">
						<view class="info-left">
							<view class="rate">
								<view class="info-title">{{ getTitle }}评分</view>
								{{ infoData.rating }}分
							</view>

							<view class="grade">
								<view class="info-title">
									{{ type === 'scenery' ? '景点等级' : type === 'hotel' ? '酒店星级' : '' }}
								</view>
								{{ infoData.grade }}
							</view>
						</view>

						<view class="info-right">
							<view class="time">
								<view class="info-title">
									{{ type === 'scenery' ? '开放时间' : type === 'hotel' ? '开业时间' : '营业时间' }}
								</view>
								{{ infoData.opening_time }}
							</view>

							<view class="type">
								<view class="info-title">{{ getTitle }}类型</view>
								{{ infoData.type }}
							</view>
						</view>
					</view>
					<view class="phone">
						<view class="info-title">{{ getTitle }}电话</view>
						{{ infoData.phone }}
					</view>
					<view class="address">
						<view class="info-title">{{ getTitle }}地址</view>
						{{ infoData.address }}
					</view>
				</view>

				<!-- Tab标签导航 -->
				<view class="tabs">
					<view class="tabs-item" :class="{ active: index === activeIndex }" v-for="(item, index) in tabList" :key="index" @click="onClickTabs(index)">
						{{ item.name }}
					</view>
				</view>

				<!-- 介绍 -->
				<view class="introduce" :id="type === 'scenery' ? 'scenery1' : type === 'hotel' ? 'hotel1' : 'restaurant1'">
					<view class="title">{{ getTitle }}介绍</view>
					<view class="content">
						<image v-if="infoData.images" :src="infoData.images[2].url" mode="aspectFill"></image>
						{{ infoData.introduce }}
						<image v-if="infoData.images" :src="infoData.images[3].url" mode="aspectFill"></image>
					</view>
				</view>

				<!-- 酒店设施 -->
				<view class="facility" id="hotel2" v-if="type === 'hotel'">
					<view class="title">酒店设施</view>
					<view class="content">
						<view class="front">
							<view class="facility-title">前台服务</view>
							<view class="facility-content" v-if="infoData.facility && infoData.facility.front_service">
								<view class="facility-item">
									<text class="iconfont" :class="{ 'icon-jinzhi': !infoData.facility.front_service.locker, 'icon-chuwugui': infoData.facility.front_service.locker }"></text>
									储物柜
								</view>
								<view class="facility-item">
									<text
										class="iconfont"
										:class="{ 'icon-jinzhi': !infoData.facility.front_service.hour_service, 'icon-a-24xiaoshiqiantai': infoData.facility.front_service.hour_service }"
									></text>
									24小时前台
								</view>
								<view class="facility-item">
									<text class="iconfont" :class="{ 'icon-jinzhi': !infoData.facility.front_service.vip, 'icon-vip': infoData.facility.front_service.vip }"></text>
									VIP通道入住
								</view>
								<view class="facility-item">
									<text
										class="iconfont"
										:class="{ 'icon-jinzhi': !infoData.facility.front_service.wake_up_service, 'icon-naozhong': infoData.facility.front_service.wake_up_service }"
									></text>
									叫醒服务
								</view>
							</view>
						</view>

						<view class="public">
							<view class="facility-title">公共区</view>
							<view class="facility-content" v-if="infoData.facility && infoData.facility.public_service">
								<view class="facility-item">
									<text class="iconfont" :class="{ 'icon-jinzhi': !infoData.facility.public_service.shop, 'icon-shangchang': infoData.facility.public_service.shop }"></text>
									商场
								</view>
								<view class="facility-item">
									<text class="iconfont" :class="{ 'icon-jinzhi': !infoData.facility.public_service.wifi, 'icon-WIFI': infoData.facility.public_service.wifi }"></text>
									公共区WIFI
								</view>
								<view class="facility-item">
									<text class="iconfont" :class="{ 'icon-jinzhi': !infoData.facility.public_service.elevator, 'icon-dianti': infoData.facility.public_service.elevator }"></text>
									电梯
								</view>
								<view class="facility-item">
									<text class="iconfont" :class="{ 'icon-jinzhi': !infoData.facility.public_service.smoke, 'icon-xiyanqu': infoData.facility.public_service.smoke }"></text>
									吸烟区
								</view>
							</view>
						</view>

						<view class="clean">
							<view class="facility-title">清洁服务</view>
							<view class="facility-content" v-if="infoData.facility && infoData.facility.clean_service">
								<view class="facility-item">
									<text
										class="iconfont"
										:class="{ 'icon-jinzhi': !infoData.facility.clean_service.laundry_service, 'icon-xiyifuwu': infoData.facility.clean_service.laundry_service }"
									></text>
									洗衣服务
								</view>
								<view class="facility-item">
									<text
										class="iconfont"
										:class="{ 'icon-jinzhi': !infoData.facility.clean_service.clothes_drier, 'icon-ganxi': infoData.facility.clean_service.clothes_drier }"
									></text>
									干洗服务
								</view>
								<view class="facility-item">
									<text class="iconfont" :class="{ 'icon-jinzhi': !infoData.facility.clean_service.iron, 'icon-yundou': infoData.facility.clean_service.iron }"></text>
									熨斗
								</view>
								<view class="facility-item">
									<text
										class="iconfont"
										:class="{ 'icon-jinzhi': !infoData.facility.clean_service.laundry_room, 'icon-xiyifangguanli': infoData.facility.clean_service.laundry_room }"
									></text>
									洗衣房
								</view>
							</view>
						</view>

						<view class="safe">
							<view class="facility-title">安全与安保</view>
							<view class="facility-content" v-if="infoData.facility && infoData.facility.safe_service">
								<view class="facility-item">
									<text
										class="iconfont"
										:class="{ 'icon-jinzhi': !infoData.facility.safe_service.first_aid_kit, 'icon-jijiubao': infoData.facility.safe_service.first_aid_kit }"
									></text>
									急救包
								</view>
								<view class="facility-item">
									<text class="iconfont" :class="{ 'icon-jinzhi': !infoData.facility.safe_service.monitoring, 'icon-lujing-3': infoData.facility.safe_service.monitoring }"></text>
									公共区域监控
								</view>
								<view class="facility-item">
									<text
										class="iconfont"
										:class="{ 'icon-jinzhi': !infoData.facility.safe_service.access_control, 'icon-menjin': infoData.facility.safe_service.access_control }"
									></text>
									门禁系统
								</view>
								<view class="facility-item">
									<text
										class="iconfont"
										:class="{ 'icon-jinzhi': !infoData.facility.safe_service.fire_extinguisher, 'icon-yanwubaojingqi': infoData.facility.safe_service.fire_extinguisher }"
									></text>
									烟雾报警器
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 政策 -->
				<view class="policy" :id="type === 'scenery' ? 'scenery2' : type === 'hotel' ? 'hotel3' : ''" v-if="type !== 'restaurant'">
					<view class="title">
						{{ type === 'scenery' ? '优待政策' : '入住政策' }}
					</view>
					<view class="content">
						<template v-if="type === 'scenery'">
							{{ infoData.preferential_policy }}
						</template>

						<template v-else-if="type === 'hotel'">
							<view class="age">
								<view class="policy-title">
									<text class="iconfont icon-shenfenzheng1"></text>
									年龄限制
								</view>
								{{ infoData.living_policy.age }}
							</view>
							<view class="time">
								<view class="policy-title">
									<text class="iconfont icon-shijian_o"></text>
									入离时间
								</view>
								{{ infoData.living_policy.time }}
							</view>
							<view class="children">
								<view class="policy-title">
									<text class="iconfont icon-ertongpiao"></text>
									儿童
								</view>
								{{ infoData.living_policy.children }}
							</view>
							<view class="pet">
								<view class="policy-title">
									<text class="iconfont icon-chongwuzhongxin"></text>
									宠物
								</view>
								{{ infoData.living_policy.pet }}
							</view>
							<view class="breakfast">
								<view class="policy-title">
									<text class="iconfont icon-zaocan"></text>
									早餐
								</view>
								{{ infoData.living_policy.breakfast }}
							</view>
							<view class="license">
								<view class="policy-title">
									<text class="iconfont icon-shenfengzheng4"></text>
									证件提示
								</view>
								{{ infoData.living_policy.license }}
							</view>
							<view class="price">
								<view class="policy-title">
									<text class="iconfont icon-shoufei-copy"></text>
									收费说明
								</view>
								{{ infoData.living_policy.price_illustration }}
							</view>
						</template>
					</view>
				</view>

				<!-- 交通信息 -->
				<view class="traffic" id="scenery3" v-if="type === 'scenery'">
					<view class="title">交通信息</view>
					<view class="content">
						<text class="iconfont icon-gongjiao"></text>
						<view class="content-right">{{ infoData.traffic }}</view>
					</view>
				</view>

				<!-- 温馨提示 -->
				<view class="tips" id="scenery4" v-if="type === 'scenery'">
					<view class="title">温馨提示</view>
					<view class="content">
						{{ infoData.tips }}
					</view>
				</view>

				<!-- 特色美食 -->
				<view class="delicacy" id="restaurant2" v-if="type === 'restaurant'">
					<view class="title">特色美食</view>
					<view class="content">
						<view class="tages" v-for="(item, index) in infoData.delicacy.split(',')" :key="index">
							<up-tag :text="item" type="warning" size="large" plain plainFill></up-tag>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<style lang="scss" scoped>
.container {
	height: 100%;
	line-height: 55rpx;
	color: #919499;

	// 定义公共样式
	@mixin common-styles {
		background-color: #fff;
		border-radius: 30rpx;
		font-size: 30rpx;
		margin-top: 20rpx;
		padding: 30rpx;
	}

	.header {
		@include common-styles;
		padding: 20rpx;
		display: flex;
		flex-direction: column;

		.info-title {
			width: 200rpx;
			display: flex;
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}

		.name {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			color: #333;
		}

		.info {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 0;

			.info-left {
				display: flex;
				flex-direction: column;
			}

			.info-right {
				display: flex;
				flex-direction: column;
			}
		}

		.phone {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx 0;
			border-top: 2rpx solid #f5f5f5;
			border-bottom: 2rpx solid #f5f5f5;
		}

		.address {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx 0;
		}
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 999;
		height: 110rpx;
		background-color: #fff;
		margin-top: 20rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;

		.tabs-item {
			height: 90rpx;
			padding: 20rpx 0;
			color: #333;
			font-weight: bold;
			font-size: 30rpx;
			transition: all ease 0.3s;

			&.active {
				border-bottom: 6rpx solid #2a6ef4;
			}
		}
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.content {
		margin: 20rpx 0;
	}

	.introduce {
		@include common-styles;
		margin-top: 0;
		border-radius: 0;

		.content {
			image {
				height: 400rpx;
				border-radius: 30rpx;
				margin: 30rpx 0;
			}
		}
	}

	.policy {
		@include common-styles;

		.content {
			.policy-title {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				margin: 30rpx 0;

				.iconfont {
					font-size: 40rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.facility {
		@include common-styles;

		.facility-title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			margin: 30rpx 0;
		}

		.facility-content {
			font-size: 25rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.facility-item {
				width: 45%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 10rpx 0;

				.iconfont {
					font-size: 50rpx;
				}
			}
		}
	}

	.traffic {
		@include common-styles;

		.content {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.iconfont {
				font-size: 80rpx;
				margin-right: 20rpx;
			}
		}
	}

	.tips {
		@include common-styles;
	}

	.delicacy {
		@include common-styles;

		.content {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.tages {
				width: 48%;
				margin: 20rpx 0;
			}
		}
	}
}
</style>
